<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <script src="js/axios.min.js"></script>
  <script src="js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>
<style>
  .msg{
    color: red;
  }
  .box-card {
    width: 100%;
    height: 200px;
    margin: auto;
    margin-top:30px ;
  }

  .container-filter{
    height: 140px;
  }

  .operate-container{
    height: 60px;
    margin-bottom:20px;
  }

  .btn-add{
    font-size: 14px;
    float: right;
  }
  .el-card__body{
    padding: 20px;
  }


  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


</style>
<body>
<div id="app">
  <div class="main-container">
    <div class="el-card box-card container-filter" >
      <div class="el-card__body container-filter-body">
        <div>
          <div class="search-top">
            <i class="el-icon-search"></i>
            <span> 筛选搜索</span>
            <el-button style="float: right;font-size: 12px" class="el-button--primary" @click="query(1)">查询结果</el-button>
            <el-button style="float: right;font-size: 12px; margin-right: 15px" @click="resetInput">重置</el-button>
          </div>
          </button>
        </div>
      </div>
      <div style="margin-top: 15px;">
        <el-form :inline="true" class="demo-form-inline" style="margin-left: 25px">
          <el-form-item label="输入搜索:" style="margin-right: 100px">
            <el-input  v-model="userName" placeholder="姓名/账号"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-card class="box-card operate-container " shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" size="mini" @click="create" >
        <span>添加</span>
      </el-button>
    </el-card>


    <div class="table-container box-card">
      <el-table border :data="tableData.data.records" style="width: 100%" :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column fixed prop="id" label="用户编号" width="150"></el-table-column>
        <el-table-column prop="userName" label="用户名称" ></el-table-column>
        <el-table-column prop="phone" label="注册手机号" ></el-table-column>
        <el-table-column prop="mail" label="用户邮箱" width="150"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号码" ></el-table-column>
        <el-table-column prop="address" label="家庭地址" ></el-table-column>
        <el-table-column prop="role" label="角色" ></el-table-column>
        <el-table-column prop="reputation" label="用户信誉度" ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button  size="mini" @click="modify(scope.row)">编辑</el-button>
            <el-button  size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-footer style="text-align: right">
        <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                       background :page-sizes="[10,15,20]"
                       layout="total,sizes,prev,pager,next,jumper"
                       :total="tableData.total"
                       :current-page.sync="tableData.page">
        </el-pagination>
      </el-footer>
    </div>
  </div>

  <el-dialog style="width: 1300px;margin-left: 350px"  title="用户编辑" :visible.sync="dialogFormVisible" :close-on-click-modal = "false">
    <div style="display: flex; justify-content: space-around;">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="UserData.userName" autocomplete="off"></el-input>
          <span class="msg">{{errors.userName}}</span>
        </el-form-item>

        <el-form-item label="注册手机号" :label-width="formLabelWidth">
          <el-input v-model="UserData.phone" autocomplete="off"></el-input>
          <span class="msg">{{errors.phone}}</span>
        </el-form-item>

        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload style="width: 200px;display: inline"
                     action="upload"
                     list-type="picture-card"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="msg">{{errors.image}}</span>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="imgUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="UserData.mail" autocomplete="off"></el-input>
          <span class="msg">{{errors.mail}}</span>
        </el-form-item>

        <el-form-item label="身份证号码" :label-width="formLabelWidth">
          <el-input v-model="UserData.idNumber" autocomplete="off"></el-input>
          <span class="msg">{{errors.idNumber}}</span>
        </el-form-item>

        <el-form-item label="家庭地址" :label-width="formLabelWidth">
          <el-input v-model="UserData.address" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-input v-model="UserData.role" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户信誉度" :label-width="formLabelWidth">
          <el-input v-model="UserData.reputation" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>


    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveUser">确 定</el-button>
    </div>

  </el-dialog>
</div>
<script>
  var v = new Vue({
    el: "#app",
    data: {
      errors:{},
      imgUrl:"/static/images/houseImg/",
      userName: "",
      pageSize: 10,
      UserActive : "1",
      UserInactive : "0",
      formLabelWidth: "100px",
      //表格数据
      tableData: { },
      // 弹框开关
      dialogFormVisible: false,
      // 弹框数据
      UserData: {},
    },
    created() {
      this.query(1);
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        if (res.code){
          this.imgUrl=this.imgUrl+res.data;
          this.UserData.image=this.imgUrl;
        }else {
          this.$alert(res.msg);
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image')==0;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能图片格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      query(page) {
        axios.get("/TN-USER/user/list", {
          params: {
            userName: this.userName,
            status: this.status,
            currentPage: page, //当前页数
            pageSize: this.pageSize //每页显示条目个数
          }
        }).then(res => {
          this.tableData = res.data;
          this.tableData.page = page;
        })
      },

      sizeChange(page) {
        this.pageSize = page;
        this.query(1);
      },
      create() {
        this.UserData = {id: "", userName: "", phone: "", mail: "", idNumber: "", address: "", role: "",reputation : ""};
        this.dialogFormVisible = true;
      },
      // 修改
      modify(data) {
        this.create();
        for (let i in data) {
          this.UserData[i] = data[i];
        }
        this.dialogFormVisible = true;
      },


      // 添加
      saveUser() {
        axios.post("/TN-USER/user/save", this.UserData).then(res => {
          if (res.data.code == 1) {
            this.$message(res.data.msg);
            this.query(1); // 刷新表格
            this.dialogFormVisible = false; // 关闭弹窗
          }else {
            this.errors={};
            for (var name in this.UserData){
              var  errMsg=res.data.data.filter(err=> err.field==name)
                      .map(err=>err.defaultMessage).join(",");
              this.errors[name]=errMsg;
            }
          }
        })
      },
      resetInput() {
        this.userName = "";
      },
      //物理删除
      remove(data){
         this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          type: 'warning'
       }).then(() => {
          axios.get("/TN-USER/user/delete",{
            params: {
              id : data.id,
              flag : "物理删除"
            }
          }).then(()=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query(1);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //逻辑删除
      changeStatus(data){
        axios.get("/TN-USER/user/delete",{
          params : {
            id : data.id,
            flag : "逻辑删除",
          }
        }).then(res=>{
          this.$message(res.data.msg);
        })
      }
    },

  })
</script>
</body>
</html>